import React from 'react';
import Modal from "../../../../../node_modules/react-bootstrap/lib/Modal";
import Button from "../../../../../node_modules/react-bootstrap/lib/Button";


var Selector = React.createClass({
    getInitialState: function () {
        return ({
            open: false,
            defaultValue: this.props.defaultValue,
            selections: this.props.selections
        })
    },
    componentWillReceiveProps: function (newprops) {
        this.setState({
            defaultValue: newprops.defaultValue,
            selections: newprops.selections
        }, function () {
            this.render()
        });
    },
    handleClose: function () {
        this.setState({open: false});
    },
    handleOpen: function () {
        this.setState({open: true});
    },
    selected:function(item,index){
        if(item.checked){
            document.getElementById("selection_"+index).getElementsByTagName("img")[0].src="/res/image/check.png";
            item.checked = false;
        }else{
            document.getElementById("selection_"+index).getElementsByTagName("img")[0].src="/res/image/check_h.png";
            item.checked = true;
        }

    },
    handleComplete:function(){
        var selected = [];
        this.state.selections.map(function(item){
            if(item.checked){
                selected.push(item);
            }
        });
        this.handleClose();
    },
    _renderSelectDialog: function () {
        var selectionItems = [];
        this.state.selections.map(function(item,index){
            for(var num in this.state.defaultValue){
                if(item.name == this.state.defaultValue[num].name){
                    item['checked'] = true;
                    break;
                }
                item['checked'] = false;
            }
            selectionItems.push(
                <div id ={"selection_"+index} onClick={this.selected.bind(this,item,index)}>
                    <span>{(item['checked'])?<img src="/res/image/check_h.png"/>:<img src="/res/image/check.png"/>}</span>
                    <span style={{marginLeft:"10px"}}>{item.name}</span>
                </div>
            )
        }.bind(this));
        return (
            <Modal
                show={this.state.open}
                style={{borderRadius:"0"}}
            >
                <Modal.Header style={{background:"#555"}}>
                    <Modal.Title style={{color:"white"}}>
                        <img src="/res/image/select.png" style={{float:"left"}}/>
                        选择
                        <img src="/res/image/close.png" style={{float:"right"}} onClick={this.handleClose}/>
                    </Modal.Title>
                </Modal.Header>
                <Modal.Body>
                    <div>
                        <div
                            style={{width:"200px",height:"22px",border:"solid 1px lightgray",marginLeft:"22px",marginBottom:"18px"}}>
                            <input type="text"
                                   style={{width: "160px",height:"20px",border: "none",float: "left",outline: "none"}}/>
                            <span className="glyphicon glyphicon-search"
                                  style={{float:"right",height:"20px",width: "20px",marginTop: "2px",marginBottom: "auto"}}
                                  aria-hidden="true"/>
                        </div>
                        <div>
                            {selectionItems}
                        </div>
                    </div>

                </Modal.Body>
                <Modal.Footer style={{borderTop:"none"}}>
                    <Button
                        onClick = {this.handleComplete}
                        style={{backgroundColor: "#555", borderColor: "#555",width:"70px",margin:'12'}}
                        bsStyle="primary">完成</Button>
                </Modal.Footer>
            </Modal>
        )
    },
    selectDialog:function(){
        this.props.openSelectDialog();
    },
    render: function () {
        var value= "";
        this.props.defaultValue.map(function(item){
            value = value + item.name +",";
        });
        if(value.length > 0 ){
            value = value.slice(0,value.length-1);
        }

        return (
            <div className="FormComponent">
                <span className="form_control_name">{this.props.title}</span>
                <div className="form_control">
                    <input value={value}
                           readOnly="readOnly"
                           style={{ marginTop: "1px",float:"left",width:"calc(100% - 102px)",height:"40px","border": "1px solid #f2f2f2",paddingLeft:"20px"}}
                    />
                    <div style={{letterSpacing: "2px",background:"#303c40",width:"100px",float:"left",cursor:"pointer",height:"37px" ,padding:" 7px 19px",marginTop:"2px"}} onClick={this.selectDialog}>
                        <img src="/res/image/select.png" style={{width:"18px"}}/>
                        <span style={{color:"white",height:"40px"}}> 选择</span>
                    </div>
                </div>

            </div>
        )
    }
})

module.exports = Selector;